<style lang="less">
.upload-image .el-upload--picture-card{
	background: transparent;
	.el-icon-plus{
		color: #fff;
	}
	
}
</style>
<template>
	<div class="comp-new">
		<el-form ref="newForm" :model="newForm" :label-width="100+'px'">
            <el-form-item label="设备编号：">{{activeDeviceNumbers.join(',')}}</el-form-item>
            <el-form-item label="播放形式：">
                <el-radio-group v-model="playMode">
                    <el-radio :label="1">音频播报</el-radio>
                    <el-radio :label="2">文本播报</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="playMode==1">
                <el-form-item label="选择音频："  prop="musicidlist" :rules="[{ required: true, message: '请选择音频' }]">
                    <el-button type="green" @click="chooseAudio">选择</el-button>
                    <p v-if="newForm.musicidlist">已选音频：{{newForm.musicidlist}}</p>
                </el-form-item>
                <el-form-item label="播放类型：" prop="model" :rules="[{ required: true, message: '请选择播放类型' }]">
                    <!-- <el-input placeholder="请输入" v-model.trim="newForm.stuntType"></el-input> -->
                    <el-select v-model="newForm.model" placeholder="请选择">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="文本内容："  prop="text" :rules="[{ required: true, message: '请填写文本内容' }]">
                    <el-input placeholder="请输入" v-model.trim="newForm.text"></el-input>
                </el-form-item>
                <el-form-item label="播放次数：" prop="times" :rules="[{ required: true, message: '请选择播放类型' }]">
                    <div class="flex v-c">
                        <div class="flex-1 mr-10"><el-slider v-model="newForm.times" :min="1" :max="200"></el-slider></div>
                        {{newForm.times}}次
                    </div>
                </el-form-item>
            </template>
            
		</el-form>
		
        <!-- 已发布IP音柱列表 start -->
        <el-dialog v-if="playIPModalVisible"
            title="已发布IP音柱"
            :visible.sync="playIPModalVisible"
            width="800px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body>
            <el-table 
                :data="IPList" 
                style="width: 100%;"
                v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="fileName" label="名称"></el-table-column>
                <!-- <el-table-column prop="filepath" label="路径"> </el-table-column> -->
                <el-table-column prop="serverMusicId" label="中转服务器ID"> </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button type="danger" :loading="deleting" @click="deleteIP(scope.row)" v-if="hasPermission('013001004001')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer">
                <el-button type="cancel" @click="playIPModalVisible=false">取消</el-button>
                <el-button type="primary" :disabled="multipleSelection.length==0" @click="doChooseAudio">确定</el-button>
            </div>
        </el-dialog>
        <!-- 已发布IP音柱列表 end -->
	</div>	
</template>
<script>
import { mapState } from 'vuex'
export default {
	name: 'audioPlay',
	props: {
		activeDevice: {
			type: Object,
			default(){
				return null
			},
		},
		activeDeviceNumbers: {
			type: Array,
			default(){
				return []
			},
		},
		
	},
	data () {
		return {
			newForm: {
                model: 1,
                deviceidarray: [],
                musicidlist: '',
                times: 1,
                text: ''
            },
            playMode:1,
			loading: false,
			typeList:[{
				id: 1,
				name:'单曲播放'
			},{
				id: 2,
				name:'单曲循环'
			},{
				id: 3,
				name:'随机播放'
			},{
				id: 4,
				name:'顺序播放'
			},{
				id: 5,
				name:'列表循环'
			}],
			IPList:[],
			playIPModalVisible: false,
            multipleSelection:[],
            deleting: false
		}
	},
    computed: {
		...mapState([
			'scale',
            'siteInfos'
		]),
    },
	created () {
        this.newForm.deviceidarray = this.activeDeviceNumbers
	},
	methods: {
		chooseAudio () {
			this.playIPModalVisible = true
			this.getIPList()
		},
		doChooseAudio () {
            let selectedAudioIds = this.multipleSelection.map(item=>item.serverMusicId)
			this.newForm.musicidlist = selectedAudioIds
			this.playIPModalVisible = false
		},
		getIPList () {
            this.$get('/fireFightingIOT/ipbroadcast/getMusicFileList',{homeId: this.siteInfos.homeId}).then(res=>{
                this.IPList = res.data
            },err=>{
                this.$message.error(err.msg)
            })
        },
		deleteIP (item,type) {
            this.showConfirm('您确定要删除该数据吗？',()=>{
                this.deleting = false
                this.$post('/fireFightingIOT/ipbroadcast/deleteMusic',{
                    id: item.id,
                    fileName: item.fileName
                }).then(res=>{
                    this.deleting = false
                    this.$message.success('删除成功')
                    this.getIPList()
                },err=>{
                    this.deleting = false
                    this.$message.error(err.msg)
                })
            })
            
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        playAudio () {
            if(this.newForm.musicidlist.length==0){
                this.$message.error('请选择音频文件')
                return
            }
			this.$refs['newForm'].validate((valid) => {
				if (valid) {
					let url = '/fireFightingIOT/ipbroadcast/playMusicByList'
					this.$emit('submitting')
                    this.$ajax({
						url: url,
						method: 'post',
						data: {
                            deviceidarray: this.newForm.deviceidarray,
                            musicidlist: this.newForm.musicidlist,
                            model: this.newForm.model
                        }
					}).then( data => {
						this.$emit('success',data);
					}, error => {
						this.$message.error(error.msg);
						this.$emit('fail');
					})
				} else {
					return false;
				}
			});
        },
        playText () {
			this.$refs['newForm'].validate((valid) => {
				if (valid) {
					let url = '/fireFightingIOT/ipbroadcast/ttsPlayMusic'
					this.$emit('submitting')
                    this.$ajax({
						url: url,
						method: 'post',
						data: {
                            deviceidarray: this.newForm.deviceidarray,
                            text: this.newForm.text,
                            times: this.newForm.times
                        }
					}).then( data => {
						this.$emit('success',data);
					}, error => {
						this.$message.error(error.msg);
						this.$emit('fail');
					})
				} else {
					return false;
				}
			});
        },
		submitAction () {
            if(this.playMode == 1){
                this.playAudio()
            }else{
                this.playText()
            }
            
		},
		cancelAction () {
			this.$emit('cancel');
		}
	},
}
</script>